<template>
  <div class="login-page">
    <ul class="bg-bubbles">
      <li v-for="i in 10" :key="i"></li>
    </ul>
    <el-row class="login-wrap">
      <el-col :class="translateLeft" :span="24">
        <div v-if="notforget">
          <div class="logo">
            <div class="title">
              <a><span>lili后台管理系统</span><span class="subtitle"></span> </a>
            </div>
          </div>
          <div class="login-form">
            <el-form :model="loginForm" :rules="loginRules" ref="loginForm">
              <el-form-item prop="username">
                <el-input @keyup.enter.native="loginHandler" placeholder="请输入用户名" v-model.trim="loginForm.username"/>
              </el-form-item>
              <el-form-item prop="password">
                <el-input @keyup.enter.native="loginHandler" placeholder="请输入密码" type="password"
                          v-model.trim="loginForm.password"/>
              </el-form-item>
              <el-form-item prop="password">
                <el-row>
                  <el-col :span="14">
                    <el-input @keyup.enter.native="loginHandler" placeholder="请输入验证码"
                              v-model.trim="loginForm.inputCode"/>
                  </el-col>
                  <el-col :span="10">
                    <div
                        style="width: 100%;height: 40px;display: flex;justify-content: flex-end;align-content: flex-end"
                        @click="refreshCode">
                      <identify :fresh="flag" @makedCode="getMakedCode"></identify>
                    </div>
                  </el-col>
                </el-row>
              </el-form-item>
<!--              <el-checkbox v-model="rememberPwd">记住密码</el-checkbox>-->
              <el-form-item style="margin-top: 20px" class="btn">
                <el-button :loading="loading" type="primary" @click="loginHandler" icon="el-icon-success">登 录
                </el-button>
              </el-form-item>
            </el-form>
          </div>

          <div class="login-footer"></div>
        </div>

        <div v-else>
          <div class="title">
            <a> <span>Vue</span><span class="subtitle">ElementUI</span> </a>
          </div>
          <div class="forget-form">
            <el-form :model="forgetForm" ref="forgetForm">
              <el-form-item>
                <el-input placeholder="请输入邮箱" v-model="forgetForm.email"/>
              </el-form-item>
              <el-form-item>
                <el-input placeholder="请输入验证码" v-model="forgetForm.code"/>
              </el-form-item>
              <el-form-item>
                <el-input placeholder="请输入密码" type="password" v-model="forgetForm.newPassword"/>
              </el-form-item>
              <el-form-item>
                <el-input placeholder="请再次输入密码" type="password" v-model="forgetForm.confirmPassword"/>
              </el-form-item>
              <el-form-item class="btn">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-button @click="wrapSwitch(true)" type="primary">返回</el-button>
                  </el-col>
                  <el-col :span="12">
                    <el-button @click="forgetHandler" type="primary">修改密码</el-button>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-col>
    </el-row>
    <div class="bottom-title">lili管理系统后台 ©️2019-2022</div>
  </div>
</template>

<script>
import identify from '@/components/identify'
import {Notification} from 'element-ui';


export default {
  name: 'login',
  components: {
    identify
  },
  data() {
    return {
      localStorageName: {
        userName: 'userName',
        passWord: 'passWord'
      },
      rememberPwd: '',
      flag: true,
      code: '',
      captcha: {
        src: require('@/assets/images/loading.gif')
      },
      loginForm: {
        username: '',
        password: '',
        captcha: '',
        inputCode: ''
      },
      loginRules: {
        username: [
          {required: true, message: '用户名不能为空', trigger: 'blur'}
          //  { pattern: /^[a-zA-Z]w{5,17}$/, message: '以字母开头,长度在6-18之间,只能包含字符、数字和下划线' }
        ],
        password: [
          {required: true, message: '密码不能为空', trigger: 'blur'}
          //  { pattern: /^(\w){6,20}$/, message: '只能输入6-20个字母、数字、下划线' }
        ],
        captcha: [{required: false, message: '验证码不能为空', trigger: 'blur'}]
      },
      forgetForm: {
        email: '',
        newPassword: '',
        confirmPassword: '',
        captcha: ''
      },
      loading: false,
      remember: true,
      switchLeft: false,
      switchRight: false,
      notforget: true
    }
  },
  computed: {
    translateLeft: function () {
      return {
        'translate-left': true,
        'login-col': true,
        'switch-left': this.switchLeft
      }
    },
    translateRight: function () {
      return {
        'translate-left': true,
        'login-col': true,
        'switch-right': this.switchRight
      }
    }
  },
  methods: {
    refreshCode() {
      this.flag = !this.flag;
    },
    getMakedCode(code) {
      this.code = code
      console.log(this.code)
    },
    wrapSwitch(state) {
      this.switchLeft = !this.switchLeft
      this.switchRight = !this.switchRight
      setTimeout(() => {
        this.notforget = state
        this.$refs.loginForm.resetFields()
      }, 300)
    },
    loginHandler() {
      if (this.loginForm.inputCode !== this.code) {
        this.$message.error('验证码错误')
        this.refreshCode()
        return
      }
      this.loading = true
      this.$refs.loginForm.validate(async valid => {
        if (valid) {
          let data = {
            username: this.loginForm.username,
            password: this.loginForm.password
          }
          console.log(data)
          this.$store.dispatch('user/loginHandler', data).then(
              resp => {
                this.$router.push({path: '/layout'})
                this.loading = false
                Notification.success({
                  title: '登陆成功',
                  message: '欢迎您登陆lili后台管理系统'
                })
              })
        } else {
          this.loading = false
        }
      })
    },
    forgetHandler() {
      this.wrapSwitch(true)
    }
  },
  mounted() {
    this.refreshCode()
  }
}
</script>

<style lang="stylus">
.bottom-title
  position fixed
  margin 0 auto
  bottom 20px
  color white

.login-form,
.forget-form
  .el-form-item__content
    line-height 40px

  .el-input__inner
    padding-top 2px
    height 40px
    line-height 40px

.btn button
  width 100%
  padding 12px 20px
</style>

<style lang="stylus" scoped>
@import "../../assets/styl/variables.styl"

.login-col
  height 100%

.login-page
  background #329cfa
  display flex
  justify-content center
  align-items center
  position absolute
  width 100%
  height 100%

  .translate-left
  .translate-right
    will-change auto
    transform translateX(0)
    transition transform .6s ease-in-out

  .switch-left
    transform translateX(525px)

  .switch-right
    transform translateX(-375px)

  .login-wrap
    overflow hidden
    width 450px
    height 440px
    background white
    border-radius 4px
    transform translateY(-10px)
    box-shadow 0 1px 3px 0 rgba(0, 0, 0, .12)

    .logo
      padding-top 26px
      text-align center
      height 120px
      background url("~@/assets/images/logo.png") center 30px / 80px 80px no-repeat

    .title
      font-weight bold
      color main-color
      padding-top 90px
      font-size 22px

      a
        cursor cell

      a:before
        content '['
        opacity 0
        margin-right 10px
        transform translateX(-10px)
        transition transform .2s, opacity .2s

      a:after
        content ']'
        opacity 0
        margin-left 10px
        transform translateX(10px)
        transition transform .2s, opacity .2s


      a:hover:after
        opacity 1
        transform translateX(0)

      .subtitle
        color sub-color

    .login-form
      padding 30px
      padding-bottom 0

      .captchaItem
        position relative

        .captchaImg
          float right
          padding 0px 1px
          border-radius 4px 4px 4px 4px
          height 28px
          position absolute
          right 6px
          top 6px

          &:hover
            cursor: pointer

    .login-footer
      padding 0 30px

      .forgetpwd
        text-algin right

        span
          cursor pointer
          font-size 14px
          font-weight 500
          color #606266

    .forget-form
      padding 20px 30px 30px
      padding-bottom 0

    .wallpaper
      width 100%
      height 100%
      background-image url('../../assets/images/loginwallpaper.jpg')
      background-size cover
      position relative

  .bg-bubbles {
    position: absolute;
    // 使气泡背景充满整个屏幕；
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    // 如果元素内容超出给定的宽度和高度，overflow 属性可以确定是否显示滚动条等行为；
    overflow: hidden;

    li {
      position: absolute;
      // bottom 的设置是为了营造出气泡从页面底部冒出的效果；
      bottom: -160px;
      // 默认的气泡大小；
      width: 40px;
      height: 40px;
      background-color: rgba(255, 255, 255, 0.15);
      list-style: none;
      // 使用自定义动画使气泡渐现、上升和翻滚；
      animation: square 15s infinite;
      transition-timing-function: linear;
      // 分别设置每个气泡不同的位置、大小、透明度和速度，以显得有层次感；

      &:nth-child(1) {
        left: 10%;
      }

      &:nth-child(2) {
        left: 20%;
        width: 90px;
        height: 90px;
        animation-delay: 2s;
        animation-duration: 7s;
      }

      &:nth-child(3) {
        left: 25%;
        animation-delay: 4s;
      }

      &:nth-child(4) {
        left: 40%;
        width: 60px;
        height: 60px;
        animation-duration: 8s;
        background-color: rgba(255, 255, 255, 0.3);
      }

      &:nth-child(5) {
        left: 70%;
      }

      &:nth-child(6) {
        left: 80%;
        width: 120px;
        height: 120px;
        animation-delay: 3s;
        background-color: rgba(255, 255, 255, 0.2);
      }

      &:nth-child(7) {
        left: 32%;
        width: 160px;
        height: 160px;
        animation-delay: 2s;
      }

      &:nth-child(8) {
        left: 55%;
        width: 20px;
        height: 20px;
        animation-delay: 4s;
        animation-duration: 15s;
      }

      &:nth-child(9) {
        left: 25%;
        width: 10px;
        height: 10px;
        animation-delay: 2s;
        animation-duration: 12s;
        background-color: rgba(255, 255, 255, 0.3);
      }

      &:nth-child(10) {
        left: 85%;
        width: 160px;
        height: 160px;
        animation-delay: 5s;
      }
    }

    // 自定义 square 动画；
    @keyframes square {
      0% {
        opacity: 0.5;
        transform: translateY(0px) rotate(45deg);
      }
      25% {
        opacity: 0.75;
        transform: translateY(-400px) rotate(90deg)
      }
      50% {
        opacity: 1;
        transform: translateY(-600px) rotate(135deg);
      }
      100% {
        opacity: 0;
        transform: translateY(-1000px) rotate(180deg);
      }
    }
  }
</style>
